<!--
 * @Author: coocase
 * @Date: 2021-03-12 17:41:27
 * @LastEditTime: 2021-06-21 18:18:27
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\components\header.vue
-->
<template>
  <div class="index-layout">
        
          <Header class="layout-header" >
              <Row class="header-row">
                 
                  <Col span="12">
                  
                    <Menu class="header-menu" mode="horizontal" theme="light" active-name="1">
                        <MenuItem name="welcome" class="welcome">
                        <Icon class="search-logo" type="md-basket" color="#ff1268" size="30" @click="goTo"/>
                            <span>Hi!欢迎 [</span>
                                <router-link v-if="userName" to="/account" class="link">{{userName}}</router-link>
                                <span v-else>
                                    <router-link to="/login" class="link">登录</router-link>
                                    <router-link to="/register" class="link">注册</router-link>
                                </span>
                            <span> ]</span>
                        </MenuItem>
                        
                        
                        <Dropdown name="account" class="account" @click.native="jump()">
                            <a href="javascript:void(0)">
                                 个人中心
                                <Icon type="ios-arrow-down"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem name="accountInfo">个人信息</DropdownItem>
                                <DropdownItem name="order">我的订单</DropdownItem>
                                <DropdownItem name="users">常用客户</DropdownItem>
                              
                            </DropdownMenu>
                        </Dropdown>
                        </Menu>
                  </Col>
                  <Col span="12">
                        <Menu mode="horizontal" theme="light" active-name="1" class="header-menu right">
                            <MenuItem name="weixin" class="weixin">
                                官方微信
                                </MenuItem>
                                <MenuItem name="mobile">
                                手机版
                                </MenuItem>
                            <!-- <Submenu name="serve" >
                                <template slot="title">
                                    客户服务
                                </template>
                                <MenuGroup title="个人中心" >
                                    <MenuItem name="accountInfo">个人信息</MenuItem>
                                    <MenuItem name="order">我的订单</MenuItem>
                                    <MenuItem name="users">常用客户</MenuItem>
                                </MenuGroup>
                            </Submenu> -->
                            <MenuItem name="serve">
                               <Dropdown name="account" class="account" @click.native="jump()">
                            <a href="javascript:void(0)">
                                 客户服务
                                <Icon type="ios-arrow-down"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem name="accountInfo">个人信息</DropdownItem>
                                <DropdownItem name="order">我的订单</DropdownItem>
                                <DropdownItem name="users">常用客户</DropdownItem>
                              
                            </DropdownMenu>
                        </Dropdown>
                                </MenuItem>
                            
                           
                            <MenuItem name="english">
                                English
                                </MenuItem>
                        </Menu>
                  </Col>
              </Row>
                
            
            
          </Header>
          
        
        </div>
</template>

<script>
export default {
    name: "Top",
    data: function () {  
        return {
            loginStatus:false,
            name: "coo"
        }
    },
    props: ['userName'],
    mounted: function(){
        
        // console.log(this.userName+' header')
    },
    updated: function () {
       
    },
    methods:{
        jump:function () { 
            // console.log("jumped");
            var geturl = this.getUrl();
            if(this.GLOBAL.hasLogin&&geturl!='account'){
                this.$router.push({  name: 'Account',params:{name:this.userName}})
            }else if(geturl=='account'){
                this.$Notice.error({
                    title: '您已经在这个页面',
                    duration:3
                });
            }else{
                 this.$Notice.error({
                    title: '请登录',
                    duration:3
                });
            }
           
        },
         getUrl(){
            //通过解析url获取用户名
        var url = window.location.href; /* 获取完整URL */
        var pattern = /[^/]+$/;
        var lastUrl = pattern.exec(url)
        // console.log(lastUrl);
        return lastUrl;
        },
        goTo:function () {  
            
            var path = this.$route.path;
            //当路径不是根目录，且不包含index时才跳转主页
            if(path!='/'&&path.search('index')==-1){
                this.$router.push({name:'Index'})   
            }
            
        },
    }

}
</script>
<style scoped>
.layout-header.ivu-layout-header{
    padding: 0;
   background-color: #f7f7f7;
   display: flex;
   justify-content: center;
   border-bottom: 1px solid #dcdee2;
}
.index-layout{
    /* background-color: #f5f5f5; */
    z-index: 1000;
}
.account{
    z-index: 1100;
}
.header-row{
    width: 1200px;
    
   }

.header-menu{
    background-color: #f7f7f7;
}
.header-menu.ivu-menu::after{
    height: 0px;
}
.header-menu .welcome{
    display: inline-block;
    width: 200px;
    padding: 0px;
}
.link{
    color: black;
}
.header-menu.right{
   float: right;
}
</style>